import { useState, useEffect, useContext } from 'react';
import { NavBar, Button, List, InfiniteScroll, Toast } from "antd-mobile";
import { AddCircleOutline } from 'antd-mobile-icons';
import { useHistory, useRouteMatch } from "react-router-dom";

import AvatarImage from '../../../components/AvatarImage';
import { ConversationType } from '../../../constants';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const { params: { groupId, groupName }} = useRouteMatch();
  const [list, setList] = useState([]);
  const [pagination, setPagination] = useState({ pageIndex: 1, totalPage: 1,totalItemCount: 0 });
  // const [newGroupName, setNewGroupName] = useState('');

  // 获取分组会话
  const getList = async (pageIndex) => {
    const data = await mySdkStore.sdk.queryConversationListByGroup({ groupId, pageIndex });
    // todo: 缺少totalItemCount
    const { list: rows = [], currentPageIndex, totalItemCount, totalPage } = data;
    setList([...list, ...rows]);
    setPagination({ pageIndex: currentPageIndex, totalItemCount, totalPage });
  }

  useEffect(() => {
    getList(1);
  }, []);

  // const handleChangeGroupName = (value: string) => {
  //   setNewGroupName(value);
  // }

  // 移除会话
  const handleRemove = async (cid) => {
    await mySdkStore.sdk.removeConversationFromGroups({ cid, groupId });
    Toast.show('会话已移除');
    setList(list.filter(item => item.cid !== cid));
  };

  return (<div className="chatMessageGroupEdit">
    <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>{ groupName }</NavBar>
      {/* <List style={{ '--border-top': '0', '--border-bottom': '0', marginTop: 12 }}>
        <List.Item extra={groupName} onClick={() => {}}>编辑名称</List.Item>
      </List> */}
      <div className="tipBar">
        包含对话：{pagination.totalItemCount}个
      </div>
      <List>
        {list.map(item => {
          return <List.Item
            key={item.cid}
            extra={<Button style={{ '--background-color': 'rgba(0,34,60,.2)', '--text-color': 'rgba(0,0,0,0.65)' }} size="small" onClick={() => handleRemove(item.cid)}>移除</Button>}
            prefix={<AvatarImage
            src={item.sessionLogoUrl}
            style={{ borderRadius: 8 }}
            fit='cover'
            width={40}
            height={40}
            userName={item.type === ConversationType.Single ? item.sessionName : ''}
            groupName={item.type === ConversationType.Group ? item.sessionName : ''}
          />}>{item.sessionName}</List.Item>
        })}
      </List>
      <InfiniteScroll loadMore={() => getList(pagination.pageIndex + 1)} hasMore={pagination.totalPage > pagination.pageIndex} />
      {/* <div className="btnBar">
        <a onClick={() => history.push({ pathname: `/addToConversationGroup/${groupId}` })}>
          <AddCircleOutline style={{ marginRight: 14 }} />
          添加会话
        </a>
      </div> */}
      {/* <div className="btnArea">
        <Button style={{ width: '100%'}} onClick={() => Dialog.show({
          title: '新建分组',
          content: <Input placeholder='请输入分组名' onChange={(value) => handleChangeGroupName(value)} />,
          closeOnAction: true,
          actions: [
            [{
              key: 'cancel',
              text: '取消',
            },
            {
              key: 'ok',
              text: '确认',
            }]
          ],
        })}>添加新分组</Button>
      </div> */}
    </div>
  )
}